<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Elmer I Fast build Admin dashboard for any platform</title>
    <meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework."/>
    <meta name="keywords"
          content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, dwh, web app, application"/>
    <meta name="author" content="hencework"/>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Bootstrap Wysihtml5 css -->
    <link rel="stylesheet" href="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css"/>

    <!-- Data table CSS -->
    <link href="vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"
          type="text/css"/>

    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
</head>

<body>
<!--/Preloader-->
<div class="wrapper   pimary-color-blue" style="min-height: 650px">
    <!-- Main Content -->
    <!-- Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <div class="contact-list">
                            <div class="row" >
                               <!-- <aside class="col-xs-1">
                                </aside>-->
                                <aside class="col-xs-1 col-md-1">
                                </aside>

                                <aside class="col-lg-10 col-md-8 pl-0">
                                    <div class="panel pa-0">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body  pa-0">
                                                <div class="table-responsive mb-30">
                                                    <table id="datable_1" class="table  display table-hover mb-30"
                                                           data-page-size="10">
                                                        <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>姓名</th>
                                                            <th>Email</th>
                                                            <th>电话</th>
                                                            <th>创建时间</th>
                                                            <th>修改时间</th>
                                                            <th>操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                        <aside class="col-lg-2 col-md-4 pr-0">
                                                            <div class="mt-20 mb-20 ml-15 mr-15">
                                                                <a href="#myModal" data-toggle="modal" title="Compose"
                                                                   class="btn btn-success btn-block">
                                                                    添加用户
                                                                </a>
                                                                <!-- Modal -->
                                                                <div aria-hidden="true" role="dialog" tabindex="-1" id="myModal"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title" >添加用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material" >
                                                                                    <div class="form-group">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请输入用户名" id="addName" name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请输入密码" id="addPwd" name="password">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请确认密码" id="addPwd2" >
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写邮箱" id="addEmail" name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写手机号码" id="addPhone" name="phone">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <span id="errMsg"></span>
                                                                                        </div>

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal" onclick="save()">保存
                                                                                </button>
                                                                                <button type="button" class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal" >取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                                <div aria-hidden="true" role="dialog" tabindex="-1" id="myModal2"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title" >编辑用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material" >
                                                                                    <div class="form-group">
                                                                                        <input type="hidden" id="editId">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请输入用户名" id="editName" name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写邮箱" id="editEmail" name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写手机号码" id="editPhone" name="phone">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <span id="errMsg2"></span>
                                                                                        </div>

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal" onclick="save2()">保存
                                                                                </button>
                                                                                <button type="button" class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal" >取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                            </div>

                                                        </aside>
                                                    </table>
													<!--
													   分页插件
													 -->
                                                    <nav>
                                                        <ul class="pagination">
                                                            <li>
                                                                <a href="#" aria-label="Previous" onclick="left()">
                                                                    <span aria-hidden="true">&laquo;</span>
                                                                </a>
                                                            </li>
<!--                                                             <li class="active"><a href="#">1</a></li>-->
<!--                                                            <li><a href="#">2</a></li>-->
<!--                                                            <li><a href="#">3</a></li>-->
                                                            <li>
                                                                <a href="#" aria-label="Next" onclick="right()">
                                                                    <span aria-hidden="true">&raquo;</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </nav>
													<!-- 分页插件结束 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->

</div>
<!-- /#wrapper -->

<!-- JavaScript -->

<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- wysuhtml5 Plugin JavaScript -->
<script src="vendors/bower_components/wysihtml5x/dist/wysihtml5x.min.js"></script>

<script src="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js"></script>

<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>

<!-- Bootstrap Wysuhtml5 Init JavaScript -->
<script src="dist/js/bootstrap-wysuhtml5-data.js"></script>

<!-- Data table JavaScript -->
<!--<script src="vendors/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="dist/js/dataTables-data.js"></script>-->

<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>

<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>

<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

</body>
<script>

    let prePage = 0;
    let nextPage = 0;
    let isFirstPage = false;
    let isLastPage = false;
    // 1. 页面加载，调用一个分页查询第一页的方法
    $(function () {
        findByPage(1);
    })

    // 2. 查询后台数据，动态展示的方法
    function findByPage(pageNum) {
        //每次查询生成新的tr，情况tbody
        $("tbody tr").remove();
        $("li[name='myli']").remove();
        $.post("/lg/user/list.do", "pageNum="+pageNum+"&pageSize=5", function (data) {
            prePage = data.data.prePage;
            nextPage = data.data.nextPage;
            isFirstPage = data.data.isFirstPage;
            isLastPage = data.data.isLastPage;
            var list = data.data.list;
            for(var i=0; i<list.length; i++){
                var $tr = $("<tr>\n" +
                    "        <th>"+list[i].id+"</th>\n" +
                    "        <th>"+list[i].username+"</th>\n" +
                    "        <th>"+list[i].email+"</th>\n" +
                    "        <th>"+list[i].phone+"</th>\n" +
                    "        <th>"+list[i].createTime+"</th>\n" +
                    "        <th>"+list[i].updateTime+"</th>\n" +
                    "        <th><a href='#myModal2' class='text-inverse pr-10' title='Edit' data-toggle='modal' onclick='getUser("+list[i].id+")'><i class=\"zmdi zmdi-edit txt-warning\"></i></a>" +
                    "<a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' onclick='del("+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a></th>\n" +
                    "        </tr>");
                $("tbody").append($tr);
            }
            // 动态生成页码
            let pages = data.data.pages;
            for(let i=0; i<pages; i++){
                let $li = $("<li name='myli'><a href='#' onclick='findByPage("+(i+1)+")'>"+(i+1)+"</a></li>");
                $("li:last").before($li);
                if(data.data.pageNum == (i+1)){
                    $li.prop("class", "active");
                }
            }
        }, "json");

    }
    function left() {
        if(isFirstPage){
            return
        }
        findByPage(prePage);
    }
    function right() {
        if(isLastPage){
            return
        }
        findByPage(nextPage);
    }
    // 添加用户
    function save() {
        //获取数据
        let name = $("#addName").val();
        let pwd = $("#addPwd").val();
        let pwd2 = $("#addPwd2").val();
        let email = $("#addEmail").val();
        let phone = $("#addPhone").val();
        if(pwd != pwd2){
            $("#errMsg").html("密码不一致");
            $("#addPwd").val("");
            $("#addPwd2").val("");
        } else {
            $("#errMsg").html("");
        }
        $.post("/lg/user/add.do", "username="+name+"&password="+pwd+"&email="+email+"&phone="+phone, function (data) {
            if(data.status == 0){
                alert("添加用户成功");
                location.reload();
            }else{
                alert("添加用户失败:" + data.msg);
                location.reload();
            }
        }, "json");
    }
    function del(id) {
        let flag = window.confirm("确认删除用户");
        if(!flag){
            return;
        }
        $.post("/lg/user/del.do", "id="+id, function (data) {
            if(data.status != 0){
                alert(data.msg);
            }
            location.reload();
        }, "json");
    }
    function getUser(id) {
        $.post("/lg/user/getUserById.do", "id="+id, function (data) {
            if(data.status == 0){
                $("#editName").val(data.data.username);
                $("#editEmail").val(data.data.email);
                $("#editPhone").val(data.data.phone);
                $("#editId").val(data.data.id);
            }else{
                alert(data.msg);
                location.reload();
            }

        })
    }
    function save2(){
        //获取数据
        var name = $("#editName").val();
        var email = $("#editEmail").val();
        var phone = $("#editPhone").val();
        var id = $("#editId").val();

        if(phone!=phone.match(/^\d+(([-]+\d)?(\d))+$/)){
            $("#errMsg2").html("电话格式错误!");
        }
        if(phone!=phone.match(/^\w+[@]+\w+[.]+\w+$/)){
            $("#errMsg2").html("邮箱格式错误!");
        }

        $.post("/lg/user/update.do",{"username":name,"email":email,"phone":phone,"id":id},function(data){
            if(data.status == 0){
                alert("更新成功");
                location.reload();
            }else{
                alert("更新失败 "+data.msg)
            }
        })
    }
</script>
</html>
